<%@ page language="java" import="java.util.*" contentType="text/html"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>增加课程</title>
<script type="text/javascript" src='<c:url value="/js/boot.js"></c:url>'></script>
<script type="text/javascript"
	src='<c:url value="/js/rqfui/rqfui.js"></c:url>'></script>
<style>
html, body {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

.coure_add_title1 {
	background: #d2ebfb;
	height: 48px;
	border-bottom: 1px solid #dddddd;
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,
		startColorStr=#b8c4cb, endColorStr=red); /*IE 6 7 8*/
	background: -ms-linear-gradient(bottom, #fff, #d2ebfb); /* IE 10 */
	background: -moz-linear-gradient(bottom, #b8c4cb, #f6f6f8); /*火狐*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb),
		to(#f6f6f8)); /*谷歌*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff),
		to(#d2ebfb)); /* Safari 4-5, Chrome 1-9*/
	background: -webkit-linear-gradient(bottom, #fff, #d2ebfb);
	/*Safari5.1 Chrome 10+*/
	background: -o-linear-gradient(bottom, #fff, #d2ebfb); /*Opera 11.10+*/
}

.course_add_content_right_titile1 {
	background: #fff !important;
	border-bottom: 1px solid #2b5eae;
}

.coure_add_bnottom1 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 250px;
	height: 95px;
	border-top: 1px solid #dddddd;
	FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,
		startColorStr=#b8c4cb, endColorStr=red); /*IE 6 7 8*/
	background: -ms-linear-gradient(top, #fff, #d2ebfb); /* IE 10 */
	background: -moz-linear-gradient(top, #b8c4cb, #f6f6f8); /*火狐*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b8c4cb),
		to(#f6f6f8)); /*谷歌*/
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff),
		to(#d2ebfb)); /* Safari 4-5, Chrome 1-9*/
	background: -webkit-linear-gradient(top, #fff, #d2ebfb);
	/*Safari5.1 Chrome 10+*/
	background: -o-linear-gradient(top, #fff, #d2ebfb); /*Opera 11.10+*/
}

.course_add_content_right_titile1 {
	position: fixed;
	overflow: hidden;
	z-index: 99;
}

.coure_add_title1>font {
	height: 48px;
	line-height: 48px;
	margin-left: 15px;
	font-size: 17px;
}

.coure_add_bnottom1>a {
	width: 125px;
	padding: 0;
	float: left;
}

.icon-add, .icon-edit, .icon-remove {
	background: none;
}

.mini-button .mini-button-icon {
	padding-left: 0;
	padding: 0px;
}

.coure_add_bnottom1 img {
	width: 12px;
	height: 12px;
	float: left;
	margin-top: 3px;
	margin-right: 10px;
}

body a:hover.mini-button {
	border: 0;
	border-color: none;
	background: none;
}

.coure_add_bnottom1>a>font {
	float: left;
}

.course_add_content {
	position: relative;
	overflow: hidden;
}

.course_add_content_left {
	float: left;
	position: fixed;
}

.course_add_content_right {
	float: right;
}

.course_add_content_right_titile1>a {
	display: block;
	width: 190px;
	padding: 13px 0;
	float: left;
	text-align: center;
}

.course_add_content_right_titile1>a>img {
	margin-right: 5px;
}

.course_add_content_right_content {
	text-align: center;
}

#course_null {
	width: 60px;
	height: 50px;
	margin: 0 auto;
	margin-top: 280px;
}

.course_add_content_right_content_contents {
	margin-top: 49px;
	padding-left: 45px;
	position: relative;
	overflow: scroll;
}

.course_add_content_right_content_contents_title>ul>li {
	width: 380px;
	float: left;
	margin: 0;
	margin: 10px 0;
}

.course_add_content_right_content_contents_title,
	.course_add_content_right_content_contents_title>ul {
	position: relative;
	text-align: left;
	overflow: hidden;
	padding: 0;
	margin: 0;
	width: 760px;
}

.course_add_content_right_content_contents_content {
	background: #fcfcfc;
	padding: 28px;
	width: 1020px;
	text-align: left;
	position: relative;
	overflow: hidden;
}

.course_add_content_right_content_contents_content>ul>li {
	position: relative;
	margin-right: 85px;
	width: 275px;
	height: 210px;
	float: left;
	margin-top: 28px;
}

.course_add_content_right_content_contents_content>ul>li:nth-child(1),
	.course_add_content_right_content_contents_content>ul>li:nth-child(2),
	.course_add_content_right_content_contents_content>ul>li:nth-child(3) {
	margin-top: 0px;
}

.course_add_content_right_content_contents_content>ul>li:nth-child(3n+0)
	{
	margin-right: 0px;
}

.course_add_content_right_content_contents_content>ul>li>a {
    position: relative;
    overflow: hidden;
	display: block;
	width: 275px;
	height: 210px;
	border: 1px solid #fff;
}

.course_add_content_right_content_contents_content>ul>li>a:hover {
	box-shadow: 0 0 10px 5px #aabedd;
}

.course_add_content_right_content_contents_content>ul>li>a>img {
	width: 100%;
	height: 100%;
}

.course_add_content_right_content_contents_content>ul {
	position: relative;
	margin: 0;
	padding: 0;
}
.course_add_content_right_content_contents_content_floatDiv{
	position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    color: #fff;
	background: rgba(182,185,184,0.4);
}
.course_add_content_right_content_contents_content_floatDiv>p{
	width: 240px;
	margin: 10px auto;
}
.course_add_content_right_content_contents_content_floatDiv>p:nth-child(1){
	margin-top: 45px;
}
</style>
</head>
<body>
	<div class="course_add_content">
		<div class="jake_mini-splitter course_add_content_left">
			<div>
				<div class="coure_add_title1">
					<font id="courseNameId"></font>
				</div>
				<div class="coure_add_bnottom1">
					<a class="mini-button" id="add_1" plain="true" iconCls="icon-add"
						onclick="addChapter" style="margin-top: 20px;"><img
						src='<c:url value="/share/images/create_zhang.png"></c:url>'></img><font>添加章</font></a>
					<a class="mini-button" id="add_3" plain="true" iconCls="icon-add"
						onclick="addSection" style="margin-top: 20px;"><img
						src='<c:url value="/share/images/modify_bianji.png"></c:url>'></img><font>添加节</font></a>
					<a  class="mini-button" id="edit" plain="true" iconCls="icon-edit"
						onclick="onEditNode()" style="margin-top: 20px;text-align: center;"><span
						class="mini-button-text  mini-button-icon icon-add" style=""><img
							src='<c:url value="/share/images/baocun.png"></c:url>'/><font>编&nbsp;&nbsp;辑</font></span></a>
					<a class="mini-button" id="remove" plain="true" iconCls="icon-edit"
						onclick="onRemoveNode()" style="margin-top: 20px; text-align: center;">
						<span class="mini-button-text  mini-button-icon icon-add" style=""><img
							src='<c:url value="/share/images/delete.png"></c:url>' /><font>删&nbsp;&nbsp;除</font></span></a>
				</div>
				<ul id="tree1" class="mini-tree" url="" onnodeclick="preview()" onendedit ="saveUpdate()"
					style="padding: 5px; margin-top: 10px;" showTreeIcon="true"
					textField="name" idField="id" parentField="pid"
					resultAsTree="false" allowDrag="true" allowDrop="true"
					ondrawnode="onTreeLoad" expandOnLoad="true">
				</ul>
			</div>
		</div>
		<div class="course_add_content_right">
			<div class="coure_add_title1 course_add_content_right_titile1">
				<a href="javascript:update()"><img
					src='<c:url value="/share/images/tianjia.png"></c:url>'></img>添加课程资料</a>
				<a href="javascript:deleteSource()"><img
					src='<c:url value="/share/images/shanchu.png"></c:url>'></img>删除课程资料</a>
			</div>
			<div class="course_add_content_right_content">
				<div class="course_add_content_right_content_contents">
					<div class="course_add_content_right_content_contents_content">
						<ul id="preview">
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="htmlContent" style="padding-left: 10px; display: none;">
		<span id="msgSpan">请输入数量:</span><input id="htmlInput"
			class="mini-textbox" style="width: 50px;" vtype="int range:1,100"
			value="8" />
	</div>

	<script type="text/javascript">
		//窗口高宽
		$(".jake_mini-splitter").css({
			"height" : $(window).height(),
			"width" : 250 + "px",
			"background" : "#f7f7f7"
		});
		

		$(".course_add_content_right").css("width",
				$(window).width() - 250 + "px");
		$(".course_add_content_right_titile1").css("width",
				$(window).width() - 250 + "px");
		$(".course_add_content_right_content_contents").css("height",
				$(window).height() - 49 + "px");
		$("#tree1").css(
				"height",
				$(window).height() - $(".coure_add_title1").height()
						- $(".coure_add_bnottom1").height() - 20 + "px");

		$(window).resize(
				function() {
					$(".jake_mini-splitter").css({
						"height" : $(window).height(),
						"width" : 250 + "px",
					});
					$(".course_add_content_right").css("width",
							$(window).width() - 250 + "px");
					$(".course_add_content_right_titile1").css("width",
							$(window).width() - 250 + "px");
					$(".course_add_content_right_content_contents").css(
							"height", $(window).height() - 49 + "px");
					$("#tree1").css(
							"height",
							$(window).height()
									- $(".coure_add_title1").height()
									- $(".coure_add_bnottom1").height() - 20
									+ "px");
				});

		//干掉remove
		/* $("#remove") */
		mini.parse();
		mini_debugger = false;
		var rootPath = '${rootPath}';
		var course_id = '${course_id}';
		var tree = mini.get("tree1");
		var type = '${type}';
		var fileServer = '${fileServer}';
		var first = true;
		$(function(){
			setCourseName();
			loadTree();
			preview();		
		});
		function setCourseName(){
			var courseName = '${course_name}';
			var showName = null;
			if(courseName.length >6){
				showName = courseName.substring(0,6)+"...";
			}else{
				showName = courseName;
			}
			
			$('#courseNameId').html('课程名称：<span title="'+courseName+'">'+showName+'</span>');
		}
		function loadTree() {
			var url = '<c:url value="/class/loadTree"></c:url>/' + course_id;
			tree.load(url);
		}
		function onTreeLoad(e) {
			var node = e.node;
			var pid = node.pid;
			if (pid == 0) {
				e.iconCls = "icon-chapter";
			} else {
				e.iconCls = "icon-section";
			}
		}
		/* 添加章 */
		function addChapter() {
			var title = "添加章";
			var info = '请输入本章标题：';
			mini.prompt(info, title, function(action, value) {
				if (action == "ok") {
					if (value) {
						addConfirm(value, 0);
					} else {
						addChapter();
					}
				} else {
					return;
				}
			});
		}
		/* 添加节 */
		function addSection() {
			var pNode = tree.getSelected();
			if (!pNode || pNode.pid != 0) {
				top.commonTools.showTip("请选择第几章！", 2);
				return;
			}
			var pid = pNode.id;
			if (!pid) {
				top.commonTools.showTip("本章数据有误 ，请联系管理员处理！", 2);
				return;
			}
			var title = "添加节";
			var info = '请输入本节标题：';
			mini.prompt(info, title, function(action, value) {
				if (action == "ok") {
					if (value) {
						addConfirm(value, pid);
					} else {
						addSection();
					}
				} else {
					return;
				}
			});
		}
		/* 添加章/节 */
		function addConfirm(value, pid) {
			var url = '<c:url value="/class/addContent"></c:url>/' + course_id;
			$.ajax({
				url : url,
				method : "post",
				dataType : "json",
				data : {
					'value' : value,
					'pid' : pid
				},
				success : function(data) {
					if (data) {
						//重新load树
						loadTree();
					} else {
						mini.showTips("失败！");
					}
				}
			});
		}

		function onAddBefore2() {
			var clone = htmlContent.cloneNode(true);
			$('#msgSpan').html('请输入要添加的数量：');
			clone.style.display = "";

			mini.showMessageBox({
				width : 250,
				title : "添加章",
				buttons : [ "ok", "cancel" ],
				message : "添加章",
				html : clone,
				showModal : false,
				callback : function(action) {
					//alert(action);
				}
			});
		}
		function onAddBefore1(e) {
			var title = '添加章';
			var info = '请输入要添加的数量：';
			mini.prompt(info, title, function(action, value) {
				if (action == "ok") {
					estimateConfirm(id, type, value);
				} else {
					return;
				}
			});

			/* var node = tree.getSelectedNode();
			var newNode = {};
			$("#disappear").hide();
			tree.addNode(newNode, "before", node); */
		}
		function onAddNode(e) {
			var node = tree.getSelectedNode();
			var newNode = {};
			$("#disappear").hide();
			tree.addNode(newNode, "add", node);

		}
		function saveUpdate(){
			var node = tree.getSelectedNode();
			if (tree.isChanged(node)) {
				var node = tree.getSelectedNode();
				var url = rootPath + "/class/update/" + node.id;
				var map = new Object;
				if(node.videoId){
					map.videoId = node.videoId.toString();
				}
				map.name = node.name;
				map.pid = node.pid.toString();
				map.courseId = node.courseId.toString();
				var jsonData = JSON.stringify(map);
				$.ajax({
					url : url,
					method : "post",
					dataType : "json",
					data : {
						'data' : jsonData
					},
					success : function(data) {
						loadTree();
						preview();
					},
					error : function() {
					}

				});
			}
		}
		function onEditNode(e) {
			var node = tree.getSelectedNode();
			tree.beginEdit(node);
		}
		function onRemoveNode(e) {
			var node = tree.getSelectedNode();
			var level = tree.getLevel(node);
			var ids = tree.getChildNodes(node);
			if (node && level == 1) {
				if (confirm("确定删除选中节点?")) {
					_delete(node.id);
					tree.removeNode(node);
				}
			} else if (node && level == 0) {
				if (confirm("确定删除选中章节及子节点?")) {
					for (var i = 0; i < ids.length; i++) {
						_delete(ids[i].id);
					}
					_delete(node.id);
					tree.removeNode(node);
				}
			}
			first = true;
			preview();
		}
		function onMoveNode(e) {
			var tree = mini.get("tree1");
			var node = tree.getSelectedNode();
			mini.showTips("moveNode");
		}

		function _delete(id) {
			var url = rootPath + "/class/deleteDir/" + id;
			$.ajax({
				url : url,
				method : "post",
				dataType : "json",
				data : {},
				success : function(data) {
				},
				error : function() {
				}

			});
		}

		function update() {
			var node = tree.getSelectedNode();
			if(!node){
				top.commonTools.showTip("请选择章节！", 2);
				return;
			}
			var level = tree.getLevel(node);
			if(level != 1){
				top.commonTools.showTip("请选择章节！", 2);
				return;
			}
			var source_id;
			mini.open({
				url : rootPath + "/class/selectSourse/"+type +"/"+course_id,
				title : "添加文件",
				width : 900,
				height : 600,
				onload : function() {
				},
				ondestroy : function(action) {
					if (action && action != 'no') {
						saveData(action);
					}
				}
			});
		}
		function deleteSource(){
			var node = tree.getSelectedNode();
			if(!node){
				top.commonTools.showTip("请选择章节！", 2);
				return;
			}
			var level = tree.getLevel(node);
			if(level != 1){
				top.commonTools.showTip("请选择章节！", 2);
				return;
			}
			if(!node.videoId){
				top.commonTools.showTip("还未添加资料！", 2);
				return;
			}
			mini.confirm("确定删除？", "确定？",
			         function (action) {
			                if (action == "ok") {
			                	var url = rootPath + "/class/updateSource/" + node.id
			        			var map = new Object;
			        			map.videoId = "";
			        			map.name = node.name;
			        			map.pid = node.pid.toString();
			        			map.courseId = node.courseId.toString();
			        			var jsonData = JSON.stringify(map);
			        			$.ajax({
			        				url : url,
			        				method : "post",
			        				dataType : "json",
			        				data : {
			        					'data' : jsonData
			        				},
			        				success : function(data) {
			        					loadTree();
			        					preview();
			        				},
			        				error : function() {
			        				}

			        			});
			                }					
			            });
			
		}
	
		function saveData(source_id) {
			var node = tree.getSelectedNode();
			var url = rootPath + "/class/update/" + node.id
			var map = new Object;
			map.videoId = source_id;
			/*  map.name = node.name;
			map.pid = node.pid;
			map.courseId = node.courseId; */
			var jsonData = JSON.stringify(map);
			$.ajax({
				url : url,
				method : "post",
				dataType : "json",
				data : {
					'data' : jsonData
				},
				success : function(data) {
					loadTree();
					preview();
				},
				error : function() {
				}

			});
		}

		function preview(e) {
			if (!first) {
				var node = tree.getSelectedNode();
				var level = tree.getLevel(node);
				var url;
				if(type == 1){
					if (level == 1) {
						url = rootPath + "/class/classInfoData/picture/child/" + course_id
								+ "/" + node.id;
					} else {
						url = rootPath + "/class/classInfoData/picture/parent/" + course_id
								+ "/" + node.id;
					}
				}else{
					if (level == 1) {
						url = rootPath + "/class/classInfoData/child/child/" + course_id
								+ "/" + node.id;
					} else {
						url = rootPath + "/class/classInfoData/parent/parent/" + course_id
								+ "/" + node.id;
					}
				}
			} else if(type!=1){
				url = rootPath + "/class/classInfoData/all/all/" + course_id + "/1";
				first = false;
			}else{
				url = rootPath + "/class/classInfoData/picture/all/" + course_id + "/1";
				first = false;
			}
			$.ajax({
						url : url,
						method : "post",
						dataType : "json",
						data : {},
						success : function(data) {
							var htmStr = "";
							if (data) {
								show(data);
							}
							
						},
						error : function() {
							top.commonTools.showTip("获取资料失败！", 2);
						}
					});
		}

		function check(attachId,type) {
			var url = rootPath +"/attach/";
			if(type == 3){
				url += "videoView/" + attachId;
			}else if(type == 2){
				url += "audioView/" + attachId;
			}else if(type == 1){
				url += "picView/" + attachId;
			}
			mini.open({
					url : url,
					title : "预览",
					width : 900,
					height : 650,
					onload : function() {
					},
					ondestroy : function(action) {
					}
			});
		}
		
		function show(data){
			console.log(data);
			var htmStr="";
			if(type != 1){
				for (var i = 0; i < data.length; i++) {
					var imgPath = data[i].imgPath;
					var imgUUID = data[i].imgUUID;
					var imgSrc = null;
					if(imgPath && imgUUID){
						imgSrc = fileServer+imgPath+'/'+imgUUID;
					}else{
						imgSrc = rootPath+"/share/images/video_show.png";
					}
					htmStr += "<li><a href='javascript:check("
							+ data[i].attId
							+ ","+data[i].ctype+");'>"
							+ "<img src='"+imgSrc+"'></img>"
							+ "<div class='course_add_content_right_content_contents_content_floatDiv'>"
							+ "<p>资料名称：" + data[i].source_name
							+ "</p><p>资料类型： " + data[i].ctype
							+ "</p><p>上传人："
							+ data[i].cr_creater
							+ "</p><p>上传时间："
							+ data[i].createTime
							+ "</p></div></a></li>";
				}
				
			}else{
				for (var i = 0; i < data.length; i++) {
					htmStr += "<li><a href='javascript:check("
							+ data[i].crid
							+ ","+data[i].ctype+");'>"
							+ "<img src='"+rootPath+"/share/images/video_show.png'></img>"
							+ "<div class='course_add_content_right_content_contents_content_floatDiv'>"
							+ "<p>资料名称：" + data[i].source_name
							+ "</p><p>资料类型： " + "图文"
							+ "</p><p>上传人："
							+ data[i].cr_creater
							+ "</p><p>上传时间："
							+ data[i].cr_createTime.replace("T"," ");
							+ "</p></div></a></li>";
				}
			}
			
			$("#preview").html(htmStr);
		}
	</script>
</body>
</html>
